<script setup lang="ts">
import {ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import HeaderVue from '@/components/Header.vue'
import {Server} from '../stores/ajax';
import {Delta, QuillEditor} from '@vueup/vue-quill'
import {RouterLink, RouterView} from 'vue-router'
import searchInput from '@/components/bbs/searchInput1.vue'
let itemData = [
    {
        title: '动态',
        href: '/bbs/world'
    },
    {
        title: '分区',
        href: '/bbs/forums'
    },
    // {
    //     title: '收藏',
    //     href: '/bbs/collection'
    // },
    {
        title: '搜索',
        href: '/bbs/search'
    },
]
let route = useRoute()
console.log(route.path)
</script>

<template>
    <!-- <el-affix style="width: 100%;"> -->
    <header>
        <HeaderVue />
    </header>
    <!-- </el-affix> -->
    <main>
        <div class="bbs-main">
            <div class="card-block bbs-nav fhs">
                <div v-for="item in itemData">
                    <el-button text class="b1" @click="$router.push({path: `${item.href}`})"
                        :class="route.path.startsWith(item.href) ? 'active' : ''">
                        {{ item.title}} </el-button>
                </div>
                <!-- <div class="search-wrapper fh"> -->
                <!--     <div class="search"> -->
                <!--         <searchInput /> -->
                <!--     </div> -->
                <!-- </div> -->
            </div>
            <RouterView />
        </div>
    </main>
    <!-- <FooterVue /> -->
</template>

<style lang="scss">
.bbs-main {
    /* min-width: 1080px; */
    margin: 0 10px;
    max-width: 1440px;
    flex-basis: 1080px;
}

.card-block {
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-lighter);
    border-radius: 4px;
}

.bbs-nav {
    /* flex-basis: 100px; */
    /* margin-left: 20px; */
    /* margin-left: -25vh; */
    /* padding: 16px 20px 0; */
    /* align-items: center; */
    /* justify-content: start; */
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 8px;

    .search-wrapper {
        flex-grow: 1;
        justify-content: flex-end;
    }

    .search {
        flex-basis: 300px;
        align-self: center;
        margin-right: 10px;
    }

    .label1 {
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;
    }

    .b1 {
        width: 100px;
        font-size: 16px;
        letter-spacing: 8px;
        /* background-color: grey; */
    }

    .active {
        color: #6666cc !important;
        font-weight: bold;
    }

    .b1:hover {
        /* background-color: grey; */
    }

    .b1.b1 {
        text-indent: -8px;
        direction: rtl;
    }
}
</style>

